<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--0:引入 vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--0:引入 axios.js-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <!--界面-->
    <div id="app">
        <button @click="getIndexData">首页数据-推荐产品</button>
        <button @click="getIndexData_topSaleItems">首页数据-Top销售</button>
        <h3>首页推荐的产品列表</h3>
        <ul>
            <li>
                产品编号    产品名称    产品明细     单价
            </li>
            <li v-for="(item,i) of recommendedItems"  :key="i">
                {{item.pid}}   {{item.title}}   {{item.details}}   {{item.price}}
            </li>
        </ul>

        <h3>首页Top销售数据的产品列表</h3>
        <ul>
            <li>
                产品编号    产品名称    产品明细     单价
            </li>
            <li v-for="(item,i) of topSaleItems"  :key="i">
                {{item.pid}}   {{item.title}}   {{item.details}}   {{item.price}}
            </li>
        </ul>

    </div>
    
    <script>
        axios.defaults.baseURL="http://115.159.160.93:8080";
        var vm = new Vue({
            //界面
            el:"#app",   
            //数据
            data:{
                recommendedItems:[],
                topSaleItems:[],
            },

            //方法
            methods:{
                getIndexData(){
                    axios.get("/index").then((res=>{    //http://115.159.160.93:8080    +   /index
                        console.log(res.data.recommendedItems);
                        //this.recommendedItems = res.data.recommendedItems;
                        var {recommendedItems,topSaleItems} = res.data;
                        this.recommendedItems = recommendedItems;
                        this.topSaleItems = topSaleItems;
                    }))                    
                },
                getIndexData_topSaleItems(){
                    axios.get("/index").then((res=>{    //http://115.159.160.93:8080    +   /index                        
                        this.recommendedItems = res.data.newArrialItems;
                    })) 
                }
            }
        })
    </script>
</body>
</html>